<template>
  <div id="statistic">
    <div class="row">
        <div class="inner-wrap">
            <div class="chartitem">
                <div class="inner">
                        <div slot="header" class="clearfix">
                        <i class="dse-rect-green"></i> <span>隐患分布图</span>
                        </div>
                        <div class="datechoose">
                        月份: <el-date-picker
                            size="mini"
                            v-model="month1"
                            type="month"
                            placeholder="选择月">
                            </el-date-picker> 
                        </div>
                        <IEcharts class="echarts" :resizable="true" :option="dangerScatter" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
                </div>
                </div>
                <div class="chartitem">
                    <div class="inner">
                            <div slot="header" class="clearfix">
                            <i class="dse-rect-green"></i> <span>隐患分区折线图</span>
                            </div>
                            <div class="datechoose">
                                年: <el-date-picker
                                v-model="year1"
                                type="year"
                                size="mini"
                                placeholder="选择年">
                                </el-date-picker>
                            </div>
                            <IEcharts class="echarts" :resizable="true" :option="dangerArea" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
                    </div>
                </div>
                <div class="chartitem">
                    <div class="inner">
                        <div slot="header" class="clearfix">
                        <i class="dse-rect-green"></i> <span>年度巡检次数</span>
                        </div>
                        <div class="datechoose">
                            年: <el-date-picker
                            v-model="month1"
                            type="year"
                            size="mini"
                            placeholder="选择年">
                            </el-date-picker>  
                        </div>
                        <IEcharts class="echarts" :resizable="true" :option="protalTotal" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
                    </div>
                </div>
        </div>
  </div>
     <div class="row">
         <div class="inner-wrap">
                     <div class="chartitem">
           <div class="inner">
                <div slot="header" class="clearfix">
                <i class="dse-rect-green"></i> <span>隐患类型图</span>
                </div>
                <div class="datechoose">
                        月份: <el-date-picker
                        v-model="month1"
                        type="month"
                        size="mini"
                        placeholder="选择月">
                        </el-date-picker>
                    </div>
                <IEcharts class="echarts" :resizable="true" :option="dangerType" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
           </div>
        </div>
        <div class="chartitem">
           <div class="inner">
                <div slot="header" class="clearfix">
                <i class="dse-rect-green"></i> <span>隐患类型分区折线图</span>
                </div>
                <div class="datechoose">
                    月份: <el-date-picker
                    v-model="year1"
                    type="month"
                    size="mini"
                    placeholder="选择月">
                    </el-date-picker>
                </div>
                <IEcharts class="echarts" :resizable="true" :option="dangerTypePolyLine" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
           </div>
        </div>
        <div class="chartitem">
           <div class="inner">
                <div slot="header" class="clearfix">
                <i class="dse-rect-green"></i> <span>年度维护数统计</span>
                </div>
                <div class="datechoose">
                    年份: <el-date-picker
                    v-model="month1"
                    type="month"
                    size="mini"
                    placeholder="选择年">
                    </el-date-picker>
                </div>
                <IEcharts class="echarts" :resizable="true" :option="repairRate" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
           </div>
        </div>
         </div>
    </div>
    <div class="row">
        <div class="inner-wrap">
                    <div class="chartitem">
           <div class="inner">
                <div slot="header" class="clearfix">
                <i class="dse-rect-green"></i> <span>出勤率统计表</span>
                </div>
                <div class="datechoose">
                    月份: <el-date-picker
                    v-model="month1"
                    type="month"
                    size="mini"
                    placeholder="选择月">
                    </el-date-picker>
                </div>
                <IEcharts class="echarts" :resizable="true" :option="attendanceRate" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
           </div>
        </div>
        <div class="chartitem">
           <div class="inner">
                <div slot="header" class="clearfix">
                <i class="dse-rect-green"></i> <span>巡检完成率</span>
                </div>
                <div class="datechoose">
                    月份: <el-date-picker
                    v-model="year1"
                    type="month"
                    size="mini"
                    placeholder="选择月">
                    </el-date-picker>
                </div>
                <IEcharts class="echarts" :resizable="true" :option="doRate" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
           </div>
        </div>
        <div class="chartitem">
           <div class="inner">
                <div slot="header" class="clearfix">
                <i class="dse-rect-green"></i> <span>上报隐患数量统计表</span>
                </div>
                <div class="datechoose">
                    月份: <el-date-picker
                    v-model="month1"
                    type="month"
                    size="mini"
                    placeholder="选择月">
                    </el-date-picker>
                </div>
                <IEcharts class="echarts" :resizable="true" :option="reportRate" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
            </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script  >
import IEcharts from "vue-echarts-v3/src/full.js";
export default {
  name: "StatisticalAnalysis",
  components: {
    IEcharts
  },
  data() {
    return {
      loading: true,
      month1: "",
      year1: "",
      dangerScatter: {
        tooltip: {
          position: "top",
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        legend: {
          orient: "vertical",
          left: "right",
          top: "middle",
          data: ["开发区", "新城区", "老城区"]
        },
        series: [
          {
            name: "隐患分布",
            type: "pie",
            radius: "60%",
            center: ["35%", "45%"],
            label: {
              normal: {
                show: false,
                position: "outside"
              },
              emphasis: {
                show: false
              }
            },
            color: ["rgb(252,157,154)", "rgb(249,205,173)", "rgb(131,195,155)"],
            data: [
              { value: 335, name: "开发区" },
              { value: 310, name: "新城区" },
              { value: 234, name: "老城区" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      dangerType: {
        tooltip: {
          position: "top",
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        legend: {
          orient: "vertical",
          left: "right",
          top: "middle",
          data: ["暗漏", "非法用水", "供水设备维修", "爆管", "供水管网压占"]
        },
        color: [
          "rgb(154,67,251)",
          "rgb(252,227,154)",
          "rgb(149,205,173)",
          "rgb(220,170,169)",
          "rgb(131,175,215)"
        ],
        series: [
          {
            name: "隐患类型",
            type: "pie",
            radius: "60%",
            center: ["35%", "45%"],
            label: {
              normal: {
                show: false,
                position: "outside"
              },
              emphasis: {
                show: false
              }
            },
            data: [
              { value: 335, name: "暗漏" },
              { value: 310, name: "非法用水" },
              { value: 234, name: "供水设备维修" },
              { value: 135, name: "爆管" },
              { value: 1548, name: "供水管网压占" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      dangerTypePolyLine: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          top: "0%",
          data: ["爆管", "暗漏", "供水设备维修", "非法用水", "供水管网压占"]
        },
         grid: {
            top: "50px",
            left: "40px",
            right: "35px",
            bottom: "30px"
          },
        xAxis: {
          type: "category",
          name: "月",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          type: "value",
          name: "隐患数量",
          nameLocation:"end"
        },
        series: [
          {
            name: "爆管",
            type: "line",
            stack: "总量",
            data: [0, 132, 101, 134, 90, 230, 210, 220, 240, 230, 280, 350]
          },
          {
            name: "暗漏",
            type: "line",
            stack: "总量",
            data: [0, 182, 191, 234, 290, 330, 310, 280, 360, 330, 380, 430]
          },
          {
            name: "供水设备维修",
            type: "line",
            stack: "总量",
            data: [0, 232, 201, 154, 190, 330, 410, 203, 250, 330, 460, 440]
          },
          {
            name: "非法用水",
            type: "line",
            stack: "总量",
            data: [0, 332, 301, 334, 390, 330, 320, 360, 380, 430, 460, 330]
          },
          {
            name: "供水管网压占",
            type: "line",
            stack: "总量",
            data: [0, 450, 460, 480, 530, 420, 330, 430, 590, 560, 620, 680]
          }
        ]
      },
      dangerArea: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          top: "5%",
          data: ["老城区", "新城区", "开发区"]
        },
        grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        xAxis: {
          name: "月",
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          name: "隐患数量",
          type: "value"
        },
        series: [
          {
            name: "新城区",
            type: "line",
            stack: "总量",
            data: [0, 132, 101, 134, 90, 230, 210, 260, 280, 300, 308, 335]
          },
          {
            name: "老城区",
            type: "line",
            stack: "总量",
            data: [0, 182, 191, 234, 290, 330, 310, 260, 240, 320, 350, 330]
          },
          {
            name: "开发区",
            type: "line",
            stack: "总量",
            data: [0, 232, 201, 154, 190, 330, 410, 350, 330, 360, 420, 450]
          }
        ]
      },
      attendanceRate: {
        color: ["#d398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
         grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        xAxis: [
          {
            type: "category",
            data: ["王龙", "徐汇", "高虎", "刘伟", "张明", "张杰", "李蒙"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "100%"
          }
        ],
        series: [
          {
            name: "出勤率统计",
            type: "bar",
            barWidth: "60%",
            data: [50, 82, 33, 76, 86, 92, 46]
          }
        ]
      },
      protalTotal: {
        color: ["#33c89B"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
         grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        xAxis: [
          {
            type: "category",
            name: "月",
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "(次)"
          }
        ],
        series: [
          {
            name: "年度巡检次数",
            type: "bar",
            barWidth: "60%",
            data: [160, 52, 200, 334, 390, 330, 220, 450, 220, 370, 260, 420]
          }
        ]
      },
      repairRate: {
        color: ["#33a8DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
         grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        xAxis: [
          {
            type: "category",
            name: "月",
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "(次)"
          }
        ],
        series: [
          {
            name: "年度维护统计",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220, 260, 280, 350, 280, 370]
          }
        ]
      },
      doRate: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
         grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        legend: {
          top: "3%",
          data: ["计划巡检里程", "实际巡检里程", "完成率"]
        },
        xAxis: [
          {
            type: "category",
            data: ["王龙", "徐汇", "高虎", "刘伟", "张明", "张杰", "李蒙"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "里程(km)",
            min: 0,
            max: 2000,
            interval: 200,
            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            type: "value",
            name: "完成率(%)",
            min: 50,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "计划巡检里程",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#fa828f"
              }
            },
            data: [1200, 1760, 1308, 1865, 1698, 1952, 1586]
          },
          {
            name: "实际巡检里程",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#8ad28f"
              }
            },
            data: [1598, 1746, 1376, 1932, 1646, 1833, 1820]
          },
          {
            name: "完成率",
            type: "line",
            itemStyle: {
              normal: {
                color: "#8ad2ff"
              }
            },
            yAxisIndex: 1,
            data: [86, 63, 91, 78, 82, 94, 85]
          }
        ]
      },
      reportRate: {
        color: ["#e3989B"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
         grid: {
            top: "40px",
            left: "40px",
            right: "45px",
            bottom: "30px"
          },
        xAxis: [
          {
            type: "category",
            data: ["王龙", "徐汇", "高虎", "刘伟", "张明", "张杰", "李蒙"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [108, 52, 200, 264, 190, 330, 220]
          }
        ]
      }
    };
  },
  methods: {
    onReady(instance) {},
    onClick(event, instance, echarts) {
      console.log(arguments);
    }
  },
  mounted() {
    this.loading = false;
  }
};
</script>


<style  lang="scss" scoped>
$baseFont:14px;
$baseColor:#333;
$baseBorderColor:#ccc;
#statistic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  .row {
    width: 100%;
    height: 33.33%;
    padding-bottom: 10px;
    &:last-child{
        padding-bottom: 0;
    }
    .inner-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .chartitem {
        width: 33.33%;
        padding-right: 10px;
        &:last-child {
          padding-right:0px;
        }
        .inner {
          width: 100%;
          height: 100%;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          .clearfix{
              height: 30px;
              line-height: 30px;
              font-size: $baseFont;
              padding-left: 10px;
              border-bottom: 1px solid #ccc;
          }
          .datechoose{
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              margin: 10px 0;
              padding-right: 25px;
              .el-date-editor{
                  margin-left: 10px;
              }
          }
          .echarts {
            height: calc(100% - 80px) !important;
          }
        }
      }
    }
  }
}
</style>
